<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 上拉加载更多组件 -->
      <van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        offset="50">
        <ArticleItem v-for="item in articleList" :key="item.art_id" :articleItem="item" @disLikes="disLikeFn" @reports="reportsFn" @click.native="itemClickFn(item.art_id)"/>
      </van-list>
		<van-empty v-if="isEmptyShow"
		  class="custom-image"
		  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
		  description="空空如也~"
		/>
    </van-pull-refresh>
	
  </div>
</template>

<script>
  import {
    getArticleApi,
    disLikeArticleApi,
    reportsArticleApi
  } from '../../../api/index.js'
  import ArticleItem from '@/components/ArticleItem.vue'
  export default {
    props: ['channelId'],
    name: 'ArticleList',
    data() {
      return {
        articleList: [], // 文字列表
        loading: false, // 上拉刷新相关变量
        finished: false, // 上拉刷新相关变量
        theTime: (new Date()).getTime(), // 当前时间戳,第一次请求的时候使用,第一次请求后获取下次请求的时间戳覆盖掉
        isLoading: false, // 下拉刷新变量
        isEmptyShow:false
      }
    },
	watch:{
		// 监听数组的变化(第一次就不监听了)
		articleList(newval){
			if(newval.length <= 0){
				this.isEmptyShow = true
			}else{
				this.isEmptyShow = false
			}
		}
	},
    // 注册组件
    components: {
      ArticleItem
    },
    // 生命周期
    created() {
      this.getArticle()
    },
    // 方法节点
    methods: {
      // 获取对应频道的文章详情
      async getArticle() {
        try {
          let {
            data: res
          } = await getArticleApi({
            channel_id: this.channelId, // 默认请求的频道id
            timestamp: this.theTime
          })
          console.log(res)
          // this.articleList = this.articleList.concat(res.data.results) // 拼接文章数组
          this.articleList = [...this.articleList, ...res.data.results] // 拼接文章数组
          this.theTime = res.data.pre_timestamp // 给下一次请求的时间戳参数赋值覆盖(上拉刷新)
          this.loading = false // 关闭底部加载中状态,不关闭则无法请求下一页的数据
          this.isLoading = false // 关闭顶部加载中状态,不关闭则无法请求第一页的数据
          if (res.data.pre_timestamp == null) { // 判断是否还有下一页
            this.finished = true
            this.$notify({
              type: 'danger',
              message: '没有更多内容了~'
            });
            return
          }
        } catch (e) {
          console.log(e)
        }
      },
      // 上拉刷新加载更多事件
      onLoad() {
        // 必须和immediate-check配合使用否则只有默认第一个组件生效其他后续生成的item子组件还是会触发发送2次请求
        if (this.articleList.length == 0) {
          this.loading = false //第一次上来会触发一次,这样写严谨一点
          return
        }
        this.getArticle()
      },
      // 下拉刷新事件
      onRefresh() {
        this.articleList = [], // 重置数组
          this.theTime = (new Date()).getTime(), // 重置为当前系统时间
          this.getArticle()
      },
      // 获取子组件不感兴趣文章的Id
      async disLikeFn(id){
       try{
         let {data : res} = await disLikeArticleApi(id)
            this.$notify({
               type: 'success', message: '屏蔽该文章成功' 
            });
			this.articleList = this.articleList.filter(x=>x.art_id !== id)
       }catch(e){
         console.log(e)
       }
      },
      // 获取子组件反馈垃圾内容的回调
      async reportsFn(id,type){
        try{
          let {data:res} = await reportsArticleApi(id,type)
          this.$notify({
             type: 'success', message: '举报该文章成功' 
          });
        }catch(e){
          console.log(e)
        }
      },
      // 点击搜索结果详情ArticleItem组件时触发跳转路由的回调事件
      itemClickFn(itemId){
        this.$router.push({
          path:`/article_detail?article_id=${itemId}`,
        })
      }
    },
  }
</script>

<style scoped>
	  .custom-image .van-empty__image {
	    width: 90px;
	    height: 90px;
	  }
</style>
